import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
type Props = {};

function Refund({}: Props) {
  const [data, setList] = useState([]);
  const navigate = useNavigate();
  const addressLists = () => {
    axios.get("http://localhost:4000/ticket").then((res) => {
      setList(res.data);
    });
  };
  useEffect(() => {
    addressLists();
  }, []);
  return (
    <div>
      {data &&
        data.map((item: any, index) => {
          return item.state === "待支付" ? (
            <div key={index} className="goods" onClick={()=>{ 
                // navigate("/xqno/" + item.id, { state: item });
                navigate("/details/" + item.id, { state: item });
            }}>
              <div className="goodstop">
                <b style={{ fontSize: "18px" }}>
                  {item.city}—{item.citys} {item.train}
                </b>
                <span style={{ fontSize: "20px", color: "rgb(255,131,0)" }}>
                  ￥{item.price}
                </span>
              </div>
              <div className="goodsmain">
                <p>
                  <span style={{ float: "left", marginRight: "10px" }}>
                    {item.railway}车厢{item.wagon}号
                  </span>
                  <span>{item.name}</span>
                </p>
                <p
                  style={{
                    color:
                      item.state === "购票成功"
                        ? "#1d953f"
                        : "#000" && item.state === "待支付"
                        ? "#d71345"
                        : "#000",
                  }}
                >
                  {item.state}
                </p>
              </div>
              <div className="goodsbottom">
                <span>{item.time}</span>
              </div>
              <button className="btns">删除订单</button>
            </div>
          ) : (
            ""
          );
        })}
    </div>
  );
}

export default Refund;
